<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>v-if和v-show</title>
    <script src="node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <button @click="show=!show">点我</button>
    <h2 v-if="show">
        Hello Vue!
    </h2>
    <ul>
        <li v-for="(user,idx) in users" v-if="user.gender=='女'" style="background-color: deeppink">
            {{ idx }},{{ user.name }},{{ user.age }},{{ user.gender }}
        </li>
        <li v-else style="background-color: deepskyblue">
            {{ idx }},{{ user.name }},{{ user.age }},{{ user.gender }}
        </li>
    </ul>
    <hr>
    <!--v-show是不显示(display:none)-->
    <h2 v-show="show">
        你好,VueJS
    </h2>
</div>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            show: false,
            users: [
                {"name": "jack", "age": 25, "gender": "男"},
                {"name": "rose", "age": 23, "gender": "女"},
                {"name": "tom", "age": 27, "gender": "男"},
                {"name": "marry", "age": 21, "gender": "女"}
            ]
        }
    });
</script>
</body>
</html>